<template>
  <el-container class="default-box">
    <!-- 右侧的功能 -->
    <el-container class="main-container">
      <!-- 顶部信息和一级导航 -->
      <el-header height="50px" class="nav-box-header">
        <!-- 一级导航 -->
        <el-row type="flex" justify="space-between" align="middle" style="padding-right:16px;">
          <el-col :span="3" style="width:184px;" >
            <div class="logo">
              <div
                v-if="structureLogo && structureLogo !== 'null' && structureLogo !== 'undefined'"
                class="logo-text logo-img"
              >
                <img :src="structureLogo" alt="logo" />
              </div>
              <div v-else class="logo-text">
                <img class="default-logo" :src="defaultLogo" alt="">
              </div>
            </div>
          </el-col>
          <el-col :span="11" style="display:flex; flex: 1">
            <ul class="header-tab" :style="{ width: topNavWidth === '0px' ? 'auto' : topNavWidth }">
              <li
                v-for="(item, index) in menuListTopNav"
                :key="index"
                class="tab-item"
                :class="{ active: topNavIndex === index }"
                @click.stop="changeActive(index)"
              >
                <span class="item-font">{{ item.resourceName | sliceMenuName }}</span>
              </li>
            </ul>
            <div v-if="slideBtn" class="slideBtn">
              <div @mouseover="slideBtnOver('left')" @mouseout="slideBtnOut('left')" @click="slideBtnLeft()">
                <img :src="left" alt="left" />
              </div>
              <div @mouseover="slideBtnOver('right')" @mouseout="slideBtnOut('right')" @click="slideBtnRight()">
                <img :src="right" alt="right" />
              </div>
            </div>
          </el-col>
          <!-- 用户部分信息 -->
          <el-col :span="10" style="text-align: right;" class="user-info">
            <!--七鱼客服 start-->
            <el-dropdown v-if="isMMallPC" placement="bottom">
              <div class="el-dropdown-link position">
                <el-avatar class="avatar-bg-pic" />
                <i class="el-icon-arrow-down el-icon--right" />
              </div>
              <el-dropdown-menu slot="dropdown">
                <div class="costomer-service">
                  <el-dropdown-item
                    v-for="(item, index) in customerServiceLists"
                    :key="index"
                    style="display:flex; flex-direction:column; text-align:right;"
                    @click.native="configYsf(item)"
                  >
                    <span>{{ item.customerTypeName || '' }}</span>
                  </el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 历史记录 -->
            <el-dropdown v-if="isShowFileCenterMenu" placement="bottom-start" trigger="hover" @visible-change="getHistoryInformation()">
              <div class="el-dropdown-link position">
                <m-iconfont classify='taiermao' size="22" icon='iconxiazaimoren1x' />
              </div>
              <el-dropdown-menu slot="dropdown" >
                <div class="history-content" v-if="uploaDownload.length > 0">
                  <el-dropdown-item 
                    class="history-content-item"
                    v-for="(item, index) in uploaDownload"
                    :key="index"
                  >
                    <el-tooltip 
                      class="item" 
                      effect="dark" 
                      :content="item.fileOldName" 
                      :disabled="showTitle"
                      placement="top" >
                      <span class="textLength" @mouseover="onShowNameTipsMouseenter">{{ item.fileOldName }}</span>
                    </el-tooltip>
                    <span style="color:#4D84FF;" v-if="item.status === 'SAVESUCCESSFUL'" @click="getClickDownload(item)">下载</span>
                    <span v-else>{{ item.showStatus }}</span>
                  </el-dropdown-item>
                </div>
                <div class="history-content-No-Data" v-else>
                  暂无数据
                </div>
                <div class="history-content-bottom">
                  <el-button @click="getOpenHistory" type="text" >查看历史记录</el-button>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
            <!--七鱼客服 end-->
            <el-dropdown v-if="positionList.length">
              <div class="el-dropdown-link position">
                <div class="positionInfo">
                  <span>{{ companyName === null || companyName === 'null' ? '' : companyName }}</span>
                  <span>{{ positionName || '' }}</span>
                </div>
                <i v-if="positionList.length" class="el-icon-arrow-down el-icon--right" />
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in positionList"
                  :key="index"
                  style="display:flex; flex-direction:column; text-align:right;"
                  @click.native="choosePosition(item.companyId)"
                >
                  <span>{{ item.companyName || '' }}</span>
                  <span>{{ item.positionName || '' }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown @command="handleDropdown">
              <span class="el-dropdown-link">
                {{ $store.state.userName || '数字化供应链生态平台' }}
                <i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="toSystemNav">
                  返回导航页面
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                  退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <!-- 面包屑，目前固定在顶部，提供右侧按钮 -->
      <el-header v-if="isShowBreadcrumb" class="nav-breadcrumb" height="50px">
        <el-row type="flex" justify="space-between" align="middle" style="height:50px;overflow:hidden;">
          <el-col :span="3" style="width:184px;" ></el-col>
          <el-col :span="21" class="breadcrumb-content">
            <el-menu
              class="breadcrumb-content-menu"
              :collapse="collapse"
              :default-active="appPathName"
              v-if="isShowLeftMenu"
              @select="menuSelect"
            >
              <div class="menuList-box">
                <div 
                  v-for="m in menuListTopNav.length ? menuListTopNav[topNavIndex].children : []" 
                  :key="m.id" 
                  class="menu-item">
                  <el-menu-item :index="m.resourcePath"  @handleCollapse="handleCollapse">
                    <span>{{ m.resourceName }}</span>
                  </el-menu-item>
                </div>
              </div>
            </el-menu>
          </el-col>
            <!-- 面包屑 -->
        </el-row>
      </el-header>
      <!-- 面包屑，目前固定在顶部，提供右侧按钮 -->
      <!-- 内容部分 -->
      <el-main class="nuxt-main">
        <div v-if="isRouterAlive" class="nuxt-content">
          <nuxt />
        </div>
      </el-main>
    </el-container>
    <!-- 查看历史记录dialog页面组件 -->
    <upLoad 
        ref="upLoad" 
    ></upLoad>
  </el-container>
</template>

<script>
import { mapState } from 'vuex';
import { sliceMenuName } from '@const/filter.js';
import MenuItem from '@components/menu-item.vue';
import IconFont from '@components/icon-font.vue';
import { Scrollbar } from 'element-ui';
import MTabsNav from '../m-components/m-tabs-nav';
import { cloneDeep, debounce } from 'lodash';
import { routerHandle } from '@const/routerHandle';
import auth from '@mixins/auth';
import cookie from 'js-cookie';
import { apiInit } from '@services/api';
import { getFileInfoList } from '@const/fileLibraryApi'
import { customerServiceList } from '@api/m_mall_web_v1';
import upLoad from '@components/historical-information'
import { $loadFileSimply } from '@const/loadFileOps'
import { fileDownload } from '@const/utils'
import mIconfont from '@pc/m-components/m-iconfont';
export default {
  filters: { sliceMenuName },
  components: { MenuItem, ElScrollbar: Scrollbar, MTabsNav, upLoad, mIconfont },
  mixins: [auth],
  provide() {
    return { ...apiInit(this.$axios), reload: this.reload };
  },
  data() {
    return {
      tabName: '',
      isRouterAlive: true,
      collapse: false,
      customerServiceLists: [], // 客服组列表
      uploaAndDownload: [],  //历史记录弹框数据
      uploaDownload: [],  //历史记录hover数据
      merchantId: this.$store.state.MID,
      companyId: this.$store.state.companyId,
      dialogVisible: false,
      showTitle: true,
      dropdownList: [
        {
          title: '退出',
          command: 'exit'
        }
      ],
      positionInfo: '',
      positionListInfo: '',
      defaultLogo:require('../assets/img/pc-neiye-logo.png'),
      structureLogo: cookie.get('structureLogo'),
      slideBtn: false,
      topNavWidth: '100%',
      right: require('@assets/img/right_y.png'),
      left: require('@assets/img/left_y.png'),
      isNavClick: false,
    };
  },
  created() {
    this.$store.dispatch('getPositionList');
    // 因为要在“初次登录的个人页获取默认菜单”，故，此处判断是否已经存在菜单后再决定是否调用
    if(!this.$route.query.basic){
      this.$store.dispatch('fetchUserAndMenuList').then(() => {
        this.topNav();
        this.$store.commit('setAppPathName',{url1:'/#'+this.$route.fullPath})
      });
    } else {
      this.$store.dispatch('fetchDefaultMenuList',this.$route.query.defaulttype).then(() => {
        this.topNav();
        this.$store.commit('setAppPathName',{url1:'/#'+this.$route.fullPath})
      })
    }
    let json = localStorage.getItem('testKey');
    let userCustomTableHeader = json && JSON.parse(json);
    this.$store.commit('tableHeadConfig', { json: userCustomTableHeader });
    Array.prototype.flat = function(count) {
      let c = count || 1;
      let len = this.length;
      let exe = [];
      if (this.length === 0) return this;
      while (c--) {
        let _arr = [];
        let flag = false;
        if (exe.length === 0) {
          flag = true;
          for (let i = 0; i < len; i++) {
            if (this[i] instanceof Array) {
              exe.push(...this[i]);
            } else {
              exe.push(this[i]);
            }
          }
        } else {
          for (let i = 0; i < exe.length; i++) {
            if (exe[i] instanceof Array) {
              flag = true;
              _arr.push(...exe[i]);
            } else {
              _arr.push(exe[i]);
            }
          }
          exe = _arr;
        }
        if (!flag && c === Infinity) {
          break;
        }
      }
      return exe;
    };
    if (!this.isMMallPC) return
    this.loadysfJs()
    this.getCustomerServiceList()
  },
  mounted() {
    this.topNavData = debounce(this.topNav, 0);
    this.$store.commit('changeTopNavIndex', this.activeIndex);
    window.onresize = () => {
      this.topNavData();
    };
  },
  computed: {
    ...mapState([
      'menuList',
      'menuListTopNav',
      'isDeepPage',
      'activeIndex',
      'topNavIndex',
      'appName',
      'appPathName',
      'activeNameArr',
      'positionList',
      'companyName',
      'positionCompanyName',
      'positionName',
      'positionId'
    ]),
    ...mapState({
      isShowTab: state => state.tab && state.tab.isShowTab,
      tabStyleData: state => state.tab && state.tab.tabStyleData,
      tabList: state => state.tab && state.tab.tabList
    }),
    isShowBreadcrumb() {
      return !(window.location.pathname.includes('/m-perfeval-pc/') || window.location.port.includes('3015'))
    },
    // 判断是否是m-mall-pc子系统
    isMMallPC() {
      return window.location.pathname.includes('/m-mall-pc/') || window.location.port.includes('3010');
    },
    // 判断是否是m-perfeval-pc子系统
    isShowFileCenterMenu() {
      return window.location.pathname.includes('/m-perfeval-pc/') || window.location.port.includes('3015');
    },
    isShowLeftMenu() {
      return this.$store.state.isShowLeftMenu;
    },
    showCompanyCode() {
      let companyCode = this.$store.state.companyCode;
      return companyCode && companyCode !== 'null';
    },
    // 计算多个公司的展示
    customCompanyName() {
      return this.$store.state.companyName !== 'null' ? this.$store.state.companyName || '平台管理员' : '平台管理员';
    },
    // 全局深层页面添加返回按钮，去重返回按钮
    layoutHandle() {
      let handleObj = this.$store.state.layoutHandle;
      let goBack = {
        type: '',
        icon: 'el-icon-arrow-left',
        val: '返回',
        handle: () => this.$router.go(-1)
      };
      if (handleObj.arr) {
        // 深拷贝，防止改变state
        let cloneDeepHandleObj = cloneDeep(handleObj);
        let nameArr = ['返回'];
        let iconArr = {
          default: '',
          primary: 'el-icon-edit',
          success: 'el-icon-check',
          info: 'el-icon-message',
          warning: 'el-icon-star-off',
          danger: 'el-icon-delete'
        };
        // 判断是否已有
        let hasInArr = false;
        cloneDeepHandleObj.arr.forEach(item => {
          // 判断是否需要插入
          if (nameArr.includes(item.val) || item.noReturn) hasInArr = true;
          if (nameArr.includes(item.val)) {
            item.icon = 'el-icon-arrow-left';
          } else if (!item.icon) {
            // 根据按钮的类型，统一设置右上角按钮icon
            item.icon = iconArr[item.type];
          }
        });
        // 无则添加
        !hasInArr && this.isDeepPage && cloneDeepHandleObj.arr.unshift(goBack);
        return cloneDeepHandleObj;
      } else {
        if (this.isDeepPage) {
          return { type: 'btn', arr: [goBack] };
        } else {
          return {};
        }
      }
    }
  },
  watch: {
    '$store.state.tab.currentPath' (tab) {
      this.tabName = tab.pathname
      this.$router.push(tab.pathname)
    },
    positionList: {
      handler: function(val, oldVal) {
        this.positionListInfo = val;
        this.positionInfo = this.positionTitle;
      },
      deep: true
    },
    activeIndex: function(val, oldVal) {
      //监听vuex中activeIndex值
      if (!this.isNavClick) {
        this.topNavData();
      }
    }
  },
  methods: {
    /**
     * tab相关操作
     * removeTab--删除选中tab页签
     * clickTab--切换tab页签
     * closeOtherTab--关闭其他页签
     * updateTab--刷新页面
     * closeAllTab--关闭所有tab页签
     */
    closeOtherTab (e) {
      // console.log(e, this.tabList)
      this.$store.dispatch('tab/deleteOther', e)
    },
    updateTab (e) {
      // console.log(e, 'e')
      this.reload()
    },
    removeTab (e) {
      this.$store.dispatch('tab/deleteOne', e)
    },
    clickTab (e) {
      this.$store.dispatch('tab/updateOne', e)
    },
    closeAllTab (e) {
      this.$store.dispatch('tab/deleteAll')
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    // 加载七鱼客服js 引入实例
    loadysfJs() {
      // eslint-disable-next-line max-params
      (function(w, d, n, a, j) {
        w[n] =
          w[n] ||
          function() {
            // eslint-disable-next-line no-return-assign
            return (w[n].a = w[n].a || []).push(arguments);
          };
        // eslint-disable-next-line no-param-reassign
        j = d.createElement('script');
        j.async = true;
        j.src = 'https://qiyukf.com/script/44ff0e4f3461b17139b63667328c7c99.js?hidden=1';
        d.body.appendChild(j);
      })(window, document, 'ysf');
    },
    // 获取 查询客服组列表
    getCustomerServiceList() {
      this.$axios.post(customerServiceList, {}).then(res => {
        this.customerServiceLists = res.data.payload || [];
      });
    },
    // 配置七鱼客服插件
    configYsf(row = {}) {
      // eslint-disable-next-line no-undef
      ysf('config', {
        uid: row.uid, // 客服ID
        name: row.companyName, // 经销商名称
        groupid: row.customerTeamId, // 分组ID，值来源于七鱼系统，在电商分配给客服
        qtype: row.topicId, // 热点话题ID，值来源于七鱼系统，在电商分配给客服
        robotShuntSwitch: 1, // 机器人优先开关
        staffid: row.customerAppoint, // 指定客服id，值来源于七鱼系统，在电商分配给经销商
        data: JSON.stringify([
          { index: 0, key: 'name', label: '用户名', value: row.userName },
          { index: 1, key: 'cusNo', label: '经销商', value: row.companyName },
          { index: 2, key: 'supName', label: '原厂', value: row.originalFactoryName },
          { index: 3, key: 'type', label: '访问类型', value: row.customerTypeName },
          { index: 4, key: 'source', label: '来源', value: '电商平台' }
        ]),
        success: () => {
          // eslint-disable-next-line no-undef
          ysf('open');
        },
        error: () => {
          // handle error
        }
      });
    },
    topNav() {
      let w1 = document.getElementsByClassName('el-header nav-box-header')[0].offsetWidth / 2;
      let w2 = document.getElementsByClassName('header-tab')[0].offsetWidth + 30;
      let lw = document.getElementsByClassName('tab-item').length * 100;
      this.topNavWidth = w1 > lw ? lw + 'px' : w1 + 'px';
      if (w2 < w1) {
        this.slideBtn = false;
      } else {
        this.slideBtn = true;
      }
      if (this.topNavIndex === 0) {
        this.left = require('@assets/img/left_y.png');
        this.right = require('@assets/img/right_n.png');
      } else if (this.topNavIndex === this.menuListTopNav.length - 1) {
        this.left = require('@assets/img/left_n.png');
        this.right = require('@assets/img/right_y.png');
      }
      // 如果选中的菜单在靠右侧刷新后希望能看到选中状态
      if (this.slideBtn) {
        for (let i = 0; i < this.topNavIndex; i += 1) {
          this.slideBtnLeft();
          this.left = require('@assets/img/left_y.png');
          this.right = require('@assets/img/right_y.png');
        }
      }
    },
    slideBtnRight() {
      if (this.menuListTopNav[0].menuSort === 0) {
        this.left = require('@assets/img/left_n.png');
      } else {
        if (this.topNavIndex < 1) {
          // 到了最右侧继续循环
          this.$store.commit('changeTopNavIndex', this.menuListTopNav.length);
        }
        let cIndex = this.topNavIndex;
        this.$store.commit('changeTopNavIndex', (cIndex -= 1));
        let clist = cloneDeep(this.menuListTopNav);
        clist.push(clist[0]);
        clist.shift();
        this.$store.commit('changeMenuListTopNav', clist);
      }
    },
    slideBtnLeft() {
      if (this.menuListTopNav[this.menuListTopNav.length - 1].menuSort === 0) {
        // this.$message.success('顶部导航已到最右侧')
      } else {
        if (this.topNavIndex > this.menuListTopNav.length - 2) {
          // 到了最左侧继续循环
          this.$store.commit('changeTopNavIndex', -1);
        }
        let cIndex = this.topNavIndex;
        this.$store.commit('changeTopNavIndex', (cIndex += 1));
        let clist = cloneDeep(this.menuListTopNav);
        clist.splice(0, 0, clist[clist.length - 1]);
        clist.pop();
        this.$store.commit('changeMenuListTopNav', clist);
      }
    },
    slideBtnOver(type) {
      if (type === 'left') {
        this.left = require('@assets/img/left_n.png');
      } else {
        this.right = require('@assets/img/right_n.png');
      }
    },
    slideBtnOut(type) {
      if (type === 'left') {
        if (this.menuListTopNav[this.menuListTopNav.length - 1].menuSort === 0) {
          this.left = require('@assets/img/left_n.png');
          this.right = require('@assets/img/right_y.png');
        } else {
          this.left = require('@assets/img/left_y.png');
          if (this.menuListTopNav[0].menuSort === 0) {
            {
              this.right = require('@assets/img/right_n.png');
            }
          } else {
            this.right = require('@assets/img/right_y.png');
          }
        }
      } else {
        if (this.menuListTopNav[0].menuSort === 0) {
          this.left = require('@assets/img/left_y.png');
          this.right = require('@assets/img/right_n.png');
        } else {
          this.right = require('@assets/img/right_y.png');
          if (this.menuListTopNav[this.menuListTopNav.length - 1].menuSort === 0) {
            {
              this.left = require('@assets/img/left_n.png');
            }
          } else {
            this.left = require('@assets/img/left_y.png');
          }
        }
      }
    },
    handleDropdown(command) {
      if (command === 'logout') {
        this.$store.commit(command);
        window.location.href = this.$store.state.toNavPage;
      } else {
        if(this.$store.state.companyId === '0') {
          window.location.href = window.location.origin + '/#/business'
        } else {
          window.location.href = this.$store.state.toNavPage;
        }
      }
    },
    handleCollapse() {
      this.collapse = !this.collapse;
    },
    // 去工作台
    toWorktable() {
      this.$router.push('/');
      this.$store.commit('changeActiveIndex', 0);
      this.$store.commit('changeTopNavIndex', 0);
    },
    // 右上角按钮事件
    loyoutBtnHandle(clickHandle, index) {
      clickHandle();
    },
    // 更改顶部选中系统的下表
    changeActive(index) {
      let resourceName = this.menuListTopNav[index].resourceName;
      if (resourceName === '考试管理学生') {
        this.$store.commit('changeIsShowLeftMenu', false);
        this.$router.push({
          path: '/andiskExam/student'
        });
      } else if (resourceName === '考试管理教师') {
        this.$store.commit('changeIsShowLeftMenu', false);
        this.$router.push({
          path: '/andiskExam/teacher'
        });
      } else {
        this.$store.commit('changeIsShowLeftMenu', true);
      }
      // this.topNavIndex = index
      this.isNavClick = true;
      this.$store.commit('changeTopNavIndex', index);
      this.$store.commit('changeActiveIndex', index);
      // 调用路由方法，这里只需要面包屑的重新导航
      routerHandle(this.$route.path, this.$store, false);
    },
    menuSelect(index) {
      if (index) {
        // 兼容本地开发，线上地址只需要window.location.href
        let url = window.location.href;
        if (url.includes('https') && url.includes('.com')) {
          window.location.href = window.location.origin + index;
        } else {
          if (index.includes('/#/')) {
            this.$router.push(index.substr(index.indexOf('/#/') + 2));
          } else {
            this.$router.push(index);
          }
        }
      } else {
        this.$message({ type: 'warning', message: '该菜单没有配置地址！' });
      }
    },
    // 切换岗位
    choosePosition(val) {
      if (this.positionId === val) {
        this.$message.error('当前已是该岗位');
        return false;
      }
      let item = {
        positionId: val
      };
      this.$store.dispatch('choosePosition', { item });
    },
    //文件中心上传下载的历史记录
    getHistoryInformation() {
      let params = {
				merchantId: this.merchantId,
				companyId: this.companyId
      }
      this.$axios.$post(getFileInfoList, params)
      .then(res => {
        let urse = res.payload.content
        this.uploaAndDownload = urse.map(item => {
          return item
        }); 
        this.uploaDownload = this.uploaAndDownload.splice(0, 3)
      })
    },
    //打开历史记录弹框
    getOpenHistory() {
      this.$refs.upLoad.dialogVisible = true
    },
    //历史记录溢出位置添加Tooltip 文字提示
    onShowNameTipsMouseenter(e) {
      var target = e.target;
      let textLength = target.clientWidth;
      let containerLength = target.scrollWidth;
      if (textLength < containerLength) {
        // 溢出了
        this.showTitle = false;
      } else {
        this.showTitle = true;
      }
    },
    //点击历史记录下载
    getClickDownload(item) {
      const params = {
				url: `/guoke-deepexi-file-library/api/v1/business/file/download?fileCode=${item.fileCode}`,
				method: 'get',
        timeout: 200000
			}
			$loadFileSimply(params)
        .then(res => { fileDownload(res, item.fileOldName) })
    },
  }
};
</script>

<style lang="less">
@import '~@assets/var.less';
@submenu-bg: #000c17;
@primary-color: #4d84ff;
// antd menu 高度
@menu-height: 50px;
// 头部的高度
@header-height: 50px;
@themeBlueWeight: #31405a;

.costomer-service {
  max-height: 180px;
  overflow: auto;
}
.history-content{
  width: 378px;
  height: 107px;
  .history-content-item{
    width: 338px; 
    display:flex; 
    flex-direction:row; 
    text-align:right;
    justify-content: space-between;
    .textLength{
      max-width: 250px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.history-content-No-Data{
  width: 378px;
  height: 107px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999999;
  font-size: 14px;
}
.history-content-bottom{
  margin-left: 40%;
  .el-button{
    padding: 0;
    color: #999999;
    font-size: 12px;
    line-height: 17px;
  }
}
.ysf-online-invite {
  display: none;
}

.avatar-bg-pic {
  background: #fff url('../m-front-common/pc/assets/img/costomer-service.png') center/22px 22px no-repeat;
}

input[type='password'] {
  -webkit-text-security: disc !important;
}

.full-page {
  width: 1200px;
  margin: 0 auto;
}

.positionVisible {
  visibility: visible;
}
.positionVisibleHidden {
  visibility: hidden;
}

.default-box {
  .main-container {
    background-color: #F4F7FA;
    height: 100vh;
    position: relative;

    .nav-box-header {
      background-color: #fff !important;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      padding-left: 0;

      .logo {
        height: @header-height;
        background: #fff;
        overflow: hidden;
        line-height: @header-height;
        text-align: center;
        // cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        .logo-icon {
          color: #fff;
          font-size: 44px;
        }

        .logo-text {
          display: inline-block;
          color: #fff;
          vertical-align: top;
          font-size: @strongFontSize;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .default-logo{
          width: 163px;
          height: 29px;
        }
        .logo-img {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          img {
            height: 34px;
          }
        }
      }

      .header-tab {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: @header-height;
        overflow: hidden;
        width: auto;

        .tab-item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          width: 100px;
          height: 100%;
          cursor: pointer;
            border-top: 3px solid transparent;
          &:hover {
            border-top: 3px solid #4d84ff;
            background: #E6EDFF;
          }

          .item-font {
            box-sizing: border-box;
            color: #666;
            height: 100%;
            display: flex;
            align-items: center;
          }

          &.active {
            background: #E6EDFF;
            border-top: 3px solid #4d84ff;
            .item-font {
              color: #4D84FF;
              font-weight: bold;
            }
          }
        }
      }

      .slideBtn {
        list-style: none;
        color: #666;
        height: @header-height;
        cursor: pointer;
        display: flex;
        width: 56px;
        align-items: center;
        justify-content: space-evenly;
        background: #e6edff;
        > div {
          display: flex;
          align-items: center;
          height: 100%;
          img{
            width: 24px;
            height: 24px;
          }
          // &:hover {
          //   // background: #1890ff;
          // }
        }
      }

      .user-info {
        height: @header-height;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #333;
        text-align: right;
        overflow: hidden;

        .el-input__inner {
          border: none;
          background: transparent;
          color: #333;
        }
        .el-select .el-input .el-select__caret {
          color: #333;
        }

        .el-dropdown-link {
          cursor: pointer;
        }

        .position {
          display: flex;
          align-items: center;
          margin-right: 15px;
          .positionInfo {
            display: flex;
            flex-direction: column;
          }
          .iconxiazaimoren1x{
            font-size: 23px;
          }
          .iconxiazaimoren1x:hover {
            font-size: 23px;
            color: #4D84FF;
          }
        }
        

        .switch {
          .el-switch__label {
            color: #fff;
          }
        }

        .info-company {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          margin: 0 30px 0 20px;
        }

        .icon-group {
          width: 140px;
          display: flex;
          justify-content: space-evenly;

          .icon-btn {
            cursor: pointer;
          }
        }
        .el-dropdown {
          color: #333;
          flex-shrink: 0;
        }
      }
    }

    .nav-breadcrumb {
      height: 50px;
      padding: 0 16px 0 0;
      background-color: #fff;
      line-height: 50px;
      box-shadow: none;
      border-top: 1px solid #e6e6e6;
      z-index: 1;
      color: #000 !important;
      overflow: hidden;

      .breadcrumb-content {
        display: flex;
        flex: 1;
        align-items: center;

        .breadcrumb-content-menu{
          border: none;
          .el-menu-item{
            padding-right: 40px;
          }
          .menuList-box{
            display: flex;
            .el-menu-item span{
              color: #666 !important;
            }
            .el-menu-item:hover{
              background: white;
            }
            .el-menu-item:hover span{
              color: #4d84ff !important;
              font-size: 14px;
            }
          }
      
          .el-menu-item {
            color: #666 !important;
            padding-left: 0 !important;
            &.is-active {
              background: white !important;
            }
            &.is-active > span {
              color: #4d84ff !important;
              background: white !important;
            }
          }
        }
      }
    }
    // main
    .nuxt-main {
      position: absolute;
      top: 90px;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
      padding: 10px;
      background: #F4F7FA;
      .nuxt-content {
        // min-height: calc(~"100% - 40px");
        min-height: 100%;

        background-color: #fff;
        position: relative;

        > div {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: 8px;
          background-color: #fff;
        }
      }
    }
  }
}
</style>
